<%@ page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
        <head>
                <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

                <%--GoogleMapApi用来获取用户地理位置，暂时只支持非IE核心--%>
                <script src="http://maps.googleapis.com/maps/api/js?sensor=true"></script>
                <script src="${obj.path}js/jquery/jquery.js"></script>
                <script src="${obj.path}js/jquery/jquery.ui.js"></script>
                <%--和后台数据交换用的--%>
                <script src="${obj.path}js/json/jquery.json.js"></script>
                <%--自己写的js库--%>
                <script src="${obj.path}js/jquery.ez.js"></script>
                <%--css加载--%>
                <style>
                        @import "${obj.path}js/jquery/css/jquery-ui-1.8.17.custom.css";

                        *{
                                font-size : 13px;
                        }

                        fieldset.main{
                                width: 800px;
                                height: 310px;
                                border: 8px solid #f0f0f0;
                                border-radius: 10px;
                                box-shadow: 30px 30px 40px rgba(0,0,0,0.25),
                                        0 0 10px rgba(0,0,0,0.68);

                        }

                        ul{
                                list-style-type: none;
                        }

                        legend{
                                padding: 2px 4px;
                                border: 4px solid #f0f0f0;
                                border-radius: 5px;
                                box-shadow: 0 0 10px rgba(0,0,0,0.68);
                        }
                </style>

                <script>
            
                        function getGeo(){
                                var components;
                                if(navigator.geolocation != null){

                                        navigator.geolocation.getCurrentPosition(function(position) {
                                                var pos = new google.maps.LatLng(position.coords.latitude,position.coords.longitude);
                                                geocoder = new google.maps.Geocoder();
                                                geocoder.geocode({
                                                        "location": pos
                                                }, function(results, status) {

                                                        components = results[0].address_components;
                                                        $("input[name=country]").val(searchAddress("country",components,"long_name"));
                                                        $("input[name=city]").val(searchAddress("locality",components,"long_name"));
                                                        $("input[name=street]").val(searchAddress("route",components,"long_name"));
                                                        $("input[name=civico]").val(searchAddress("street_number",components,"long_name"));
                                                });
                                        });
                                }else{
                                        alert("请使用非ie核心登陆该页面");
                                        return null;
                                }
                        }
            
                        function searchAddress(need,components,args){
                                var len = components.length;
                                for(var x = 0;x < len;x++){
                                        var type = components[x].types;
                                        var typeLen = type.length;
                                        for(var y = 0;y < typeLen;y++){
                                                if(type[y] == need){
                                                        return components[x][args];
                                                }
                                        }
                                }
                                return null;
                        }
     
                        $(document).ready(function(){
                                getGeo();
                                setMid("fieldset.main",1,"xy");
                                $(window).resize(function(){
                                        setMid("fieldset.main",888,"xy");
                                });
                    
                                changeCode();
                                $(document).mousemove(function(e){
                                        var xyw = d($("input[name=account]"));
                                        var x = xyw.top;
                                        var y = xyw.left;
                                        var w = xyw.width;
                                        setTimeout(function(){
                                                $("#codeimg").css("top",x).css("left",y + w + 8).css("display","block");
                                        },88);
                                });
                    
                                //项目发布前需要Del！！！！
                                $("input[name=account]").val("enzo.lvi@gmail.com");
                                $("input[name=password]").val("nji9mko0");
                                $("input[name=code]").val("${obj.age}");
            
                                $("#buttonLogin").button().click(function(){
                                        login();
                                });
                    
                                $("#buttonChangePic").button().click(function(){
                                        changeCode();
                                });
                    
                                $("input[name=code]").keypress(function(event){
                                        if(event.keyCode == 13){
                                                login();
                                        }
                                });
			
                                function login(){
                         
                                        $("button").attr("disabled",true);
                                        $("input").attr("disabled",true);
                         
                                        var data = {
                                                manager : {
                                                        account : $("input[name=account]").val(),
                                                        password : $("input[name=password]").val()
                                                },
                                                code : $("input[name=code]").val()
                                        };
                    
                                        var json = $.toJSON(data);
                         
                                        $.ajax({
                                                url : "/back/login",
                                                data : json,
                                                type : "post",
                                                dataType : "json",
                                                success : function(res) {
                                                        if(res.res){
                                                                window.location = res.url;
                                                        }else{
                                                                alert(res.tip);
                                                                window.location = res.url;
                                                        }
                                                }
                                        }); 
                                }
                    
                                function changeCode(){
                                        $("#codeimg").css("display","none").css("position" , "absolute").attr("src","../back/code?t=" + new Date());
                                }
                    
                                $("input[name=code]").focus(function(){
                                        var x = d($("input[name=account]")).top;
                                        var y = d($("input[name=account]")).left;
                                        var w = d($("input[name=account]")).width;
                                        $("#codeimg").css("top",x).css("left",y + w + 8).css("display","block");
                                }).blur(function(){
                                        $("#codeimg").css("display","none")
                                });
                  
                        });
            
                </script>

                <title>${obj.ip}</title>

        </head>
        <body>

                <fieldset class="main">
                        <legend>后台登陆</legend>

                        <ul>
                                <li>${msg.ciao}</li>
                                <li>${obj.time}</li>
                                <li>
                                        <label>账&nbsp;&nbsp;号:
                                                <input name="account" type="text"/>
                                        </label>
                                </li>
                                <li>
                                        <label>密&nbsp;&nbsp;码:
                                                <input name="password" type="password"/>
                                        </label>
                                </li>
                                <li>
                                        <label>验证码:
                                                <input name="code" type="text"/>
                                        </label>
                                </li>
                                <li>
                                        <button id="buttonLogin">登陆</button>
                                        <button id="buttonChangePic">换一张</button>
                                </li>
                        </ul>

                        <input name="country"/>
                        <input name="city"/>
                        <input name="street"/>
                        <input name="civico"/>
                        <input name="ip" value="${obj.ip}"/>
                </fieldset>

                <img id="codeimg"/>
        </body>

</html>
